<template>
  <div class="box">
    <div class="contain">
      <div class="message-box">
        <p>择校宝，<br />你的专属管家</p>
        <div class="message">
          <div class="one">
            <span>目标省份：</span>
            <el-select
              v-model="message.province"
              placeholder="请选择"
              size="medium"
            >
              <el-option
                v-for="(item, index) in schprovince"
                :key="index"
                :value="item"
              >
              </el-option>
            </el-select>
            <span>学校类型：</span>
            <el-select
              v-model="message.schType"
              placeholder="请选择"
              size="medium"
            >
              <el-option
                v-for="(item, index) in schstyle"
                :key="index"
                :value="item.schstyle"
              >
              </el-option>
            </el-select>
          </div>
          <div class="two">
            <span>学校特色：</span>
            <el-select
              v-model="message.schoolSchstate"
              placeholder="请选择"
              size="medium"
            >
              <el-option
                v-for="(item, index) in schstate"
                :key="index"
                :value="item.schstate"
              >
              </el-option>
            </el-select>
            <span>办学特色：</span>
            <el-select
              v-model="message.banxueType"
              placeholder="请选择"
              size="medium"
            >
              <el-option
                v-for="(item, index) in schattr"
                :key="index"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
          <div class="three">
            <span>请输入学校关键字 :</span>
            <el-input
              v-model="message.name"
              placeholder="请输入学校关键字（选填）"
            ></el-input>
          </div>
          <div class="search">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handeMessage"
              >点击搜索</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <squery-result :result="result"></squery-result>
  </div>
</template>

<script>
import SqueryResult from './SqueryResult'
export default {
  data() {
    return {
      message: {
        schType: '',      // 学校类型
        province: '',  // 学校省份
        schoolSchstate: '',   // 学校特色
        banxueType: '',    // 办学类型
        name: '',
      },
      result: [],

      schstyle: [],
      schprovince: [],
      schstate: [],
      schattr: []
    }
  },
  components: {
    SqueryResult
  },
  created() {
    this.$http({
      url: '/zxb/school/findProvince',
      method: 'post'
    }).then(res => {
      this.schprovince = res.data.data
    });
    this.$http({
      url: '/zxb/school/findNature',
      method: 'post'
    }).then(res => {
      this.schattr = res.data.data
    });
    this.$http2({
      url: '/schoolquery/schcondition',
      type: 'get'
    }).then(res => {
      this.schstyle = res.data[0].schstyle
      this.schstate = res.data[0].schstate
    })
  },
  methods: {

    //获取查询到的数据
    handeMessage() {
      this.$http2({
        url: '/searSchLimit',
        method: 'post',
        data: {
          ...this.message
        }
      }).then(res => {
        this.result = res.data
        // console.log(this.result);
      })
    }
  }
}
</script>

<style lang="less" scoped>
* {
  // padding: 0;
  // margin: 0;
  box-sizing: border-box;
}
.contain {
  // border: 1px solid #ccc;
  position: relative;
  top: 40px;
}
.message-box {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 250px;
  //   border: 1px solid #ccc;
  box-shadow: 0 2px 2px rgba(10, 16, 20, 0.24), 0 0 2px rgba(10, 16, 20, 0.12);
  p {
    position: absolute;
    width: 350px;
    font-family: xingkai;
    font-size: 50px;
    left: 600px;
    top: 30px;
    background-image: linear-gradient(to right, orangered, orange, gold);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
}
.message {
  margin: 30px 0 0 60px;
  color: #606266;
  .one {
    margin-bottom: 20px;
  }
  .el-select {
    width: 100px;
    margin-right: 20px;
  }
  .three {
    margin-top: 20px;
    .el-input {
      width: 200px;
      margin-left: 15px;
    }
  }
  .search {
    margin-top: 10px;
  }
}
</style>
